<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的商城</title>
</head>
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script src="../../plugins/element-ui/index.js"></script>
<style>
    .el-header,
    .el-footer {
        text-align: center;
        line-height: 60px;
    }

    .goods {
        border: 2px solid #a1a1a1;
        width: 265px;
        height: 380px;
        border-radius: 25px;
        margin-top: 20px;
        margin-left: 20px;
        display: inline-block;
    }

    .image {
        border-radius: 25px 25px 0px 0px;
        width: 265px;
        height: 255px;
    }

</style>

<body>
<div id="app">
    <el-container>
        <el-header>
            <div>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                         @select="handleSelect">
                    <div style="display: inline-block;margin-left: 1300px;">
                        <el-dropdown v-if="btnhead">
                            <span class="el-dropdown-link">
                                <el-avatar :size="40" :src="userInfo.headImage"  style="margin-top: 10px;"> </el-avatar>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-user" @click.native="userCenter">我的信息</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-error" style="color: rgb(230, 73, 73);" @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <el-button type="primary" style="margin-right: 20px;" v-if="btnlogin" @click="jumpLogin()" >登录 </el-button>
                    </div>
                </el-menu>

            </div>
        </el-header>
        <el-main>
            <div style="margin-left: 30px;">
                <div>
                    <template>
                        <div style="margin: 10px 0">
                            <el-input style="width: 300px;margin-right: 20px;" placeholder="搜索" v-model="search"
                                      suffix-icon="el-icon-search"></el-input>
                            <el-button
                                    class="ml-5-5"
                                    type="primary"
                                    @click="doSearch()"
                                    style="margin-left: 5px"
                            >搜索</el-button>
                        </div>
                    </template>
                </div>
                <span>全部分类&nbsp;&nbsp;&nbsp;</span>
                </br>
                <el-button type="text"  @click="getGoodsInfo('')">全部&nbsp;&nbsp;&nbsp;/</el-button>
                <el-button v-for="(item,i) in typeName" type="text" @click="getGoodsInfo(item)">{{item}}&nbsp;&nbsp;&nbsp;/</el-button>
            </div>
            <div>
                <div class="goods" v-for="(item,i) in goodsInfo"  @click="seeDetail(item.goodsId)">
                    <el-image class="image" :src="item.image"></el-image>
                    <div style="font-size:18px;
                                    margin-top: 5px;
                                    margin-left: 8px;
                                    color:#000;
                                    line-height:24px;
                                    white-space:nowrap;
                                    text-overflow:ellipsis;
                                    word-break:break-all;
                                    overflow:hidden;">
                        {{item.goodsName}}
                    </div>
                    <div style="font-size:18px;
                                    margin-top: 5px;
                                    margin-left: 8px;
                                    line-height:24px;;">
                        起拍价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;¥&nbsp;&nbsp;&nbsp;{{item.startingPrice}}
                    </div>
                    <div style="font-size:18px;
                                    margin-top: 5px;
                                    margin-left: 8px;
                                    line-height:24px;;">
                        开始时间 &nbsp;&nbsp;{{item.startingTime}}
                    </div>
                    <div style="font-size:18px;
                                    margin-top: 5px;
                                    margin-left: 8px;
                                    line-height:24px;;">
                        结束时间 &nbsp;&nbsp;{{item.endTime}}
                    </div>
                </div>

        </el-main>
        <el-footer>
            <div class="block" id="footer">
                <el-pagination background @current-change="handleCurrentChange"
                               :current-page="pagination.currentPage" :page-size="pagination.pageSize"
                               layout="total, prev, pager, next, jumper" :total="pagination.total">
                </el-pagination>
            </div>
        </el-footer>
    </el-container>
</div>




</div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            codeUrl: "",
            btnlogin: true,
            btnhead: false,
            formLabelWidth: '120px',
            loginFormVisible: false,
            registerFormVisible: false,
            activeIndex: '1',
            typeName: [
                "黄金",
                "翡翠",
                "和田玉",
                "钻石",
            ],
            search:"",
            currentType: null,
            pagination: { //分页相关模型数据
                currentPage: 1, //当前页码
                pageSize: 15, //每页显示的记录数
                total: 0, //总记录数
            },
            goodsInfo: [
                {
                    "goodsId": null,
                    "userId": null,
                    "goodsName": "",
                    "deposit": null,
                    "description": null,
                    "imageId": null,
                    "startingPrice": null,
                    "typeId": null,
                    "startingTime": "",
                    "endTime": "",
                    "priceMarkup": null,
                    "createTime": null,
                    "updateTime": null,
                    "status": null,
                    "typeName": null,
                    "image": ""
                }

            ],

            registerForm: {
                userName: "",
                password: "",
                currentPassword: "",
                email: "",
                code: ""
            },
            loginForm: {
                userName: "",
                password: "",
                code: ""

            },

            userInfo:{
                headImage: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            },
            // mailDisabled: false,
            // btnName: "发送邮箱验证码",
            // count: 59,
        },
        created(){
            if(sessionStorage.getItem("currentPage") != null){
                this.pagination.currentPage = (sessionStorage.getItem("currentPage"));
            }
            if(sessionStorage.getItem("currentType") != null){
                this.getGoodsInfo(sessionStorage.getItem("currentType"))
            }else{
                this.getGoodsInfo("");
            }
            axios.get("/type/getAllType").then((res) => {
                this.typeName = res.data.data;
            })
            if(sessionStorage.getItem("userId") != null){
                this.btnhead = true;
                this.btnlogin = false;
                this.getHeadImage()
            }
        },

        methods: {
            getHeadImage(){
               axios.get("/user/getUserHeadImage/" + sessionStorage.getItem("userId")).then((res => {
                   this.userInfo.headImage = res.data.data;
               }))


            },

            jumpLogin(){
                window.location.href ="./login.html";
            },
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                if(sessionStorage.getItem("currentType") != null){
                    this.getGoodsInfo(sessionStorage.getItem("currentType"))
                }else{
                    this.getGoodsInfo("");
                }
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            seeDetail(goodsId){
                sessionStorage.setItem("currentGoodsId",goodsId);
                window.location.href = "./goodsDetail.html"
            },

            getGoodsInfo(type){
                if(type === ""){

                    axios.get("/goodsInfo/getAll/" + this.pagination.currentPage + "/" +this.pagination.pageSize + "?type=" ).then((res) => {
                        this.pagination.currentPage = res.data.data.pageNum;
                        this.goodsInfo = res.data.data.list;
                        this.pagination.total = res.data.data.total;
                        sessionStorage.setItem("currentType",type);
                        sessionStorage.setItem("currentPage",res.data.data.pageNum);
                    })
                }else {
                    axios.get("/goodsInfo/getAll/" + this.pagination.currentPage + "/" +this.pagination.pageSize + "?type=" +type).then((res) => {
                        this.pagination.currentPage = res.data.data.pageNum;
                        this.goodsInfo = res.data.data.list;
                        this.pagination.total = res.data.data.total;
                        sessionStorage.setItem("currentType",type);
                        sessionStorage.setItem("currentPage",res.data.data.pageNum);
                    })
                }
                this.search = "";

            },
            logout(){
                axios.get("/user/logout").then((res) => {
                    sessionStorage.clear();
                    this.btnlogin = true;
                    this.btnhead = false;
                })
            },
            userCenter(){
                window.open("./user_center.html")
            },
            doSearch(){
                if(this.search == ""){
                    this.pagination.currentPage = 1;
                    this. getGoodsInfo("");
                }else {
                    axios.get("/goodsInfo/getAll/" +this.search).then((res) => {
                        this.pagination.total = res.data.data.length;
                        this.pagination.currentPage = 1;
                        this.goodsInfo = res.data.data;
                    })
                }


            },
        },


    })
</script>
</script>

</html>